<template>
	<view>
		<view class="conversations-container">
			<scroll-view class="conversations" scroll-y="true" enable-flex="true">
				<view v-if="pendingConversations.length !=0">
					<view class="scroll-item" v-for="(item,index) in pendingConversations" :key="index">
						<view class="item-head">
							<image :src="item.data.avatar" class="head-icon"></image>
							<view v-if="item.unread" class="item-head_unread">{{item.unread}}
							</view>
						</view>
						<view class="scroll-item_info">
							<view class="item-info-top">
								<text class="item-info-top_name">{{item.data.name}}</text>
								<view class="item-info-top_time">{{item.lastMessage.date}}</view>
							</view>
							<view class="item-info-bottom">
								<view class="item-info-bottom-item" @click="chat(item)">
									<view class="item-info-top_content">
										<view v-if="item.lastMessage.type == 'text'">
											{{item.lastMessage.payload.text}}
										</view>
										<view v-else-if="item.lastMessage.type == 'video'">[视频消息]</view>
										<view v-else-if="item.lastMessage.type == 'audio'">[语音消息]</view>
										<view v-else-if="item.lastMessage.type == 'image'">[图片消息]</view>
										<view v-else-if="item.lastMessage.type == 'file'">[文件消息]</view>
										<view v-else-if="item.lastMessage.type == 'order'">[自定义消息:订单]</view>
										<view v-else>[[未识别内容]]</view>
									</view>
									<view class="item-info-bottom_action">接入</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-conversation" v-else>当前没有待接入</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				csteam: null,
				pendingConversationAmount: 0,
				pendingConversations: [],
			};
		},
		onShow() {
			let userinfo = uni.getStorageSync('userinfo');
			let currentAgent = {
				avatar: userinfo.avatar,
				id: userinfo.id + '',
				name: userinfo.nickname,
				shopId: uni.getStorageSync('team').id
			}
			this.csteam = this.goEasy.im.csteam(currentAgent.shopId);
			this.listenConversationUpdate(); //监听会话列表变化
			this.loadConversations(); //加载会话列表
		},
		onHide() {
			this.goEasy.im.off(this.GoEasy.IM_EVENT.PENDING_CONVERSATIONS_UPDATED, this.renderPendingConversations);
		},
		methods: {
			// 加载最新的待接入会话列表
			loadConversations() {
				this.goEasy.im.pendingConversations({
					onSuccess: (result) => {
						this.renderPendingConversations(result.content);
					},
					onFailed: (error) => {
						console.log('获取待接入列表失败, error:', error);
					}
				});
			},
			listenConversationUpdate() {
				// 监听会话列表变化
				this.goEasy.im.on(this.GoEasy.IM_EVENT.PENDING_CONVERSATIONS_UPDATED, this.renderPendingConversations);
			},
			renderPendingConversations(content) {
				this.pendingConversations = content.conversations;
				console.log("待接入列表",this.pendingConversations);
				this.pendingConversationAmount = content.conversations.length;
			},
			chat(item) {
				const customer = {
					id: item.id,
					name: item.data.name,
					avatar: item.data.avatar,
				}
				console.log("当前接入的聊天室用户", customer);
				uni.navigateTo({
					url: '/pages/serviceChat/serviceChat?to=' + JSON.stringify(customer)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.conversations-container {
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.conversations {
		width: 750rpx;
		height: 100%;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
	}

	.conversations .scroll-item {
		height: 152rpx;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
	}

	.conversations .scroll-item .head-icon {
		width: 100rpx;
		height: 100rpx;
		margin-right: 28rpx;
	}

	.conversations .scroll-item_info {
		height: 151rpx;
		width: 590rpx;
		padding-right: 32rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #EFEFEF;
	}

	.conversations .scroll-item_info .item-info-top {
		padding-top: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.conversations .item-info-top_name {
		font-size: 34rpx;
		color: #262628;
	}

	.conversations .item-info-top_time {
		font-size: 26rpx;
		color: rgba(179, 179, 179, 0.8);
		font-family: Source Han Sans CN;
	}

	.conversations .item-info-bottom {
		height: 50rpx;
		line-height: 50rpx;
		overflow: hidden;
	}

	.conversations .item-info-bottom-item {
		display: flex;
		justify-content: space-between;
	}

	.item-info-bottom .item-info-top_content {
		font-size: 30rpx;
		color: #b3b3b3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: flex;
	}

	.item-info-bottom_action-image {
		width: 100%;
		height: 100%;
	}

	.unread-text {
		color: #d02129;
	}

	.item-info-bottom .item-info-bottom_unread {
		padding: 6rpx;
		background-color: #EE593C;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 28rpx;
		border-radius: 24rpx;
		min-width: 24rpx;
		min-height: 24rpx;
		text-align: center;
	}

	.no-conversation {
		width: 100%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #9D9D9D;
	}

	.item-info-bottom .item-info-bottom_action {
		width: 100rpx;
		height: 50rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #d02129;
		cursor: pointer;
		background-color: #F1F1F1;
	}

	.item-head {
		position: relative;
	}

	.item-head .item-head_unread {
		padding: 6rpx;
		background-color: #EE593C;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 28rpx;
		border-radius: 24rpx;
		min-width: 24rpx;
		min-height: 24rpx;
		text-align: center;
		position: absolute;
		top: 0;
		right: 15rpx;
	}

	.action-container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action-container .layer {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(51, 51, 51, 0.5);
		width: 100%;
		height: 100%;
		z-index: 99;
	}

	.action-box {
		width: 400rpx;
		height: 240rpx;
		background: #ffffff;
		position: relative;
		z-index: 100;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.action-item {
		text-align: center;
		line-height: 120rpx;
		font-size: 34rpx;
		color: #262628;
		border-bottom: 1px solid #EFEFEF;

	}
</style>